<template>
  <div>
    <div class="eda-main-title">
      <div class="top-icon">
        <img src="../../../assets/img/personnelImage/创建流程图.png"/>
      </div>
      <div class="top-title">
        流程：处理 - 员工在职证明
      </div>
      <div class="top-operate">
<!--        <el-button type="primary" @click="handleExport">打印</el-button>-->
        <el-button type="primary" @click="dialogTableVisible = true">打印</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="primary" @click="this.$router.replace('/per/service')">取消</el-button>
      </div>
    </div>
    <div class="eda-main">
      <div class="main-middle">
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
                 size="default" @submit.prevent>
          <div class="table-container">
            <table class="table-layout customer-table">
              <tbody>
              <tr>
                <td  colspan="3">
                  <div class="static-content-item">
                    <div>基本信息</div>
                  </div>
                </td>
              </tr>
              <tr style="background: rgb(248,249,250)">
                <td >
                  <div class="static-content-item">
                    <div>标题</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>入职日期</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>申请人</div>
                  </div>
                </td>
              </tr>
              <tr style="background: rgb(248,249,250)">
                <td>
                  <el-form-item
                      style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                      label="" label-width="0" prop="ictitle" class="label-center-align">
                    <el-input v-model="formData.ictitle" readonly="true" size="large" type="text" clearable>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label=""
                                style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                                label-width="0" prop="rctime" class="label-center-align">
                    <el-input v-model="formData.rctime" size="large" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label=""
                                style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                                label-width="0" prop="ename" class="label-center-align">
                    <el-input v-model="formData.ename" size="large"  @focus="dialogTableVisible = true" type="text" clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td >
                  <div class="static-content-item">
                    <div>申请人部门</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>申请日期</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>现任岗位</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="" label-width="0" prop="dname" class="label-center-align">
                    <el-input
                        style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                        v-model="formData.dname"
                        class="w-50 m-2"
                        type="text"
                        size="large"
                        readonly
                    />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="appDate" class="label-center-align">
                    <el-date-picker
                        :disabled-date="publishDateAfter"
                        v-model="formData.appDate"
                        style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                        type="date"/>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label=""
                                style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                                label-width="0" prop="posname" class="label-center-align">
                    <el-input v-model="formData.posname" size="large" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td >
                  <div class="static-content-item">
                    <div>电话号码</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>身份证</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="" label-width="0" prop="phone" class="label-center-align">
                    <el-input
                        style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                        v-model="formData.phone"
                        class="w-50 m-2"
                        type="text"
                        size="large"
                        readonly
                    />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label=""
                                style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                                label-width="0" prop="idCard" class="label-center-align">
                    <el-input v-model="formData.idCard" size="large" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="3"></td>
              </tr>
              <tr>
                <td colspan="3">
                  <el-form-item label="流传意见" prop="cause" class="label-center-align">
                    <el-input type="textarea" v-model="formData.cause" size="large" rows="3"></el-input>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogTableVisible" title="打印">
    <div ref="pdf">
      <el-form :model="formData" label-position="left" label-width="150px"
               size="default" @submit.native.prevent>
        <div class="static-content-item" style="
      text-align: center;
      font-size: 25px;
      margin: 0 auto 20px;">
          <div>员工在职证明</div>
        </div>
        <el-form-item label="标题" prop="ictitle">
          <el-input v-model="formData.ictitle" readonly="true" type="text"></el-input>
        </el-form-item>
        <el-form-item label="入职日期" prop="rctime">
          <el-input v-model="formData.rctime" readonly="true" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="ename">
          <el-input v-model="formData.ename" readonly="true" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请人部门" prop="dname">
          <el-input v-model="formData.dname" readonly="true" type="text"></el-input>
        </el-form-item>
        <el-form-item label="申请日期" prop="appDate">
          <el-input v-model="formData.appDate" readonly="true" type="text"></el-input>
        </el-form-item>
        <el-form-item label="现任岗位" prop="posname">
          <el-input v-model="formData.posname" readonly="true" type="text"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="formData.phone" readonly="true" type="text"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="formData.idCard" readonly="true" type="text"></el-input>
        </el-form-item>
        <div class="static-content-item">
          <el-divider direction="horizontal"></el-divider>
        </div>
        <el-form-item label="其他信息" prop="cause">
          <el-input type="textarea" v-model="formData.cause" readonly="true" rows="3"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="handleExport">提交</el-button>
    <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
  </el-dialog>
</template>

<script>
import {insOjp} from "../../../network/per/proveMuster";
import {pdfDownload} from "../../../common/htmlToPdf"
import WaterMark  from "../../../common/waterMark"
export default {
  name:"pdf",
  data() {
    return {
      dialogTableVisible : false,
      accountData:JSON.parse(decodeURIComponent(this.$route.query.lcArr)),
      formData:{
        ictitle : "",
        empId : null,
        ename : "",
        deptId :null,
        dname : "",
        cause : "",
        rctime : "",
        phone : "",
        positionId : null,
        posname : "",
        idCard : "",
        appDate : new Date().toLocaleDateString().replaceAll("/","-"),
      },
      }
    },
  created() {
    this.formData.ictitle = "员工在职证明 - " + this.accountData[0].ename + " - "
        + (this.accountData[0].ectime + " ").split("T")[0],
    this.formData.empId = this.accountData[0].eid
    this.formData.ename = this.accountData[0].ename
    this.formData.deptId =  this.accountData[0].did
    this.formData.dname = this.accountData[0].dname
    this.formData.rctime = (this.accountData[0].ectime + " ").split("T")[0]
    this.formData.phone = this.accountData[0].phone
    this.formData.positionId = this.accountData[0].pid
    this.formData.posname = this.accountData[0].pname
    this.formData.idCard = this.accountData[0].rcard;
    },
  mounted() {
    WaterMark.set('阿龙集团')
  },
  methods: {
    handleExport(){
      pdfDownload(this.$refs.pdf,this.formData.ictitle)
    },
    publishDateAfter(time){
      return time.getTime() < Date.now();
    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        //TODO: 提交表单
        insOjp(this.formData).then((das)=>{
          if (das.code === 200){
            this.$router.push({path: '/per/service'})
          }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp";
</style>
<style>
.el-input__inner{
  height: 40px;
  line-height: 40px;
}
</style>